<template>
	<view class="container">
		<view style="display: flex;">
			<view class="" style="margin-right: 40rpx;flex: 1;" >	
				<u-search placeholder="搜索你想要的游戏" searchIcon="/static/search.png" height="70rpx" :searchIconSize="18" bgColor="#F2F2F2" :showAction="false" :disabled="true" @click="goSearch()">
				</u-search>
			</view>
			<view style="display: flex;position: relative;" v-on:click="goMsg()">
				<u-icon name="/static/xiaox.png" size="24"></u-icon>
				<u-badge :isDot="true" type="error" :absolute="true" :offset="[24,-3]"></u-badge>
			</view>
		</view>
		<view style="margin-top: 30rpx;">
			<u-swiper :list="list" keyName="image" height="365rpx" @click="click"></u-swiper>
		</view>
		<view style="margin: 0 -20rpx;">
			<u-tabs :list="tab" lineColor="#14C5CD"   @click="changeCate" style="font-size: 60rpx;font-weight: 600;"></u-tabs>
			<view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in categame" :key="listIndex" @click="navto(listItem.game_url)">
						<image :src="listItem.image" style="margin:20rpx 0;border-radius:20rpx;width: 128rpx;height: 128rpx;"></image>
						<text class="grid-text">{{listItem.name}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view style="margin-top: 40rpx;margin-bottom: 40rpx;">
			<u-notice-bar :text="text1" bgColor="#ECFAFB"  color="#2E333A" icon="/static/laba.png" style="border-radius: 10px;padding: 20rpx 40rpx;"></u-notice-bar>
		</view>
		<view style="display: flex;margin-top: 40rpx;margin-bottom: 20rpx;">
			<u--text prefixIcon="/static/fire.png" :size="18" iconStyle="width: 44rpx;height: 44rpx;margin-right:2px" :bold="true" text="本周好游"></u--text>
			<u--text suffixIcon="/static/2jiant.png" iconStyle="font-size: 18px" :size="14" align="right" color="#8C8C8C" text="查看更多"></u--text>
		</view>
		
		<view class="u-page">
			<u-list
				@scrolltolower="scrolltolower"
			>
				<u-list-item
					v-for="(item, index) in gameList"
					:key="index"
				>
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view style="display: flex;margin-right: 20rpx;">
							<image v-if="index == 0" src="/static/phb1.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 1" src="/static/phb12.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 2" src="/static/phb13.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<text v-if="index > 2" style="margin:20rpx 0;width: 50rpx;height: 50rpx;text-align: center;font-size: 36rpx;font-weight: 600;" >{{index+1}}</text>
						</view>
						<view style="display: flex;margin-right: 20rpx;">
							<image :src="item.image" style="margin:20rpx 0;border-radius:28rpx;width: 128rpx;height: 128rpx;"></image>
						</view>
						<view style="">
							<view class="gametext" style="font-size: 30rpx;font-weight: 600;">{{item.name}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.intro}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.catename}}</view>
						</view>
					</view>
					<view style="align-items: center;">
						<view style="background-color: #DDFAFC;color: #10C4CB;font-size: 24rpx;text-align: center;border-radius: 60rpx;line-height: 24rpx;display: inline-block;padding: 14rpx 40rpx;" v-on:click="navto(item.game_url)">秒玩</view>
					</view>
				</view>
				</u-list-item>
				<u-loadmore :status="status" nomoreText="我也是有底线的" :line="true" />
			</u-list>
			
		</view>
	</view>
</template>

<script>
	import {getBanner,getRank,getCate,getGameListById,getAnnouncement} from  "@/api/api.js"
	export default {
		data() {
			return {
				text1: '小游戏平台上线了！只需登录一次！各种有趣的休闲小游戏任你玩~~',
				list:[],
				tab: [],
				cateId:'',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				page:1,
				limit:10,
				cate:3,
				isEnd:false,
				status:'loading',
				gameList: [],
				categame:[],
			}
		},
		onLoad() {
			this.show()
			this.loadmore()
		},
		methods: {
			show(){
				getBanner().then(res=>{
					this.list = res.data
				});
				getCate(1).then(res=>{
					this.tab = res.data
					this.cateId = res.data[0].id
					this.getgame();
				});
				getAnnouncement().then(res=>{
					this.text1 = res.data
				});
				
			},
			scrolltolower() {
				
				if(!this.isEnd){
					this.page +=1;
					this.loadmore()
				}
				
			},
			loadmore() {
				getRank(this.page,this.limit,this.cate).then(res=>{
					this.gameList.push(...res.data)
					if(res.data.length<this.limit){
						this.isEnd=true;
						this.status = 'nomore';
					}
				});
			},
			navto(val){
				if (uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/pages/webview/webview?gameurl='+val
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			changeCate(index){
				this.cateId = index.id;
				this.getgame();
			},
			getgame(){
				getGameListById(this.cateId).then(res=>{
					this.categame = res.data
				});
			},
			click(index){
				uni.navigateTo({
					url:'/pages/webview/webview?gameurl='+this.list[index].link
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			goMsg(){
				uni.navigateTo({
					url:'/pages/msg'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.grid-text {
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:140rpx;
	}
	.gametext{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:240rpx;
	}
</style>
